import { VueComponent,Prop } from 'vue-typescript'
import {dataService} from '../../service/dataService'
import * as VueRouter from 'vue-router'

var VuePagination = require('v-pagination');
Vue.use(VuePagination)


Vue.use(VueRouter);
var router = new VueRouter();


var VueTables = require('vue-tables');
Vue.use(VueTables.client,{
    filterable:false,
    compileTemplates:true,
    highlightMatches:true
});

interface JQuery {
    bootstrapTable(options?: any): JQuery;
    bootstrapTable(name:string,any):JQuery;
}
declare var bootstrapTable: JQueryStatic;

@VueComponent({
    template: require('./orderManage.html'),
})

export class OrderManageComponent extends Vue {
    el:'#orderManage'
    components:({
        vclienttable:any,
    })

    @Prop
    records:number=1;
    PerPage=10
    
    //订单状态枚举
    orderStatusList=[
        {text:"全部", value:"1,3,4,5,6,7,8"},
        {text:"派车中",value:"1,4"},
        {text:"已派车",value:"3"},
        {text:"待发货",value:"5"},
        {text:"已发货",value:"6"},
        {text:"货已送达",value:"7"},
        {text:"订单终结",value:"8"}
    ]
    orderQuery={
        orderId:'',
        startAddress:'',
        endAddress:'',
        startTime:'',
        endTime:'',
        orderStatus:this.orderStatusList[0].value,
    }

    status:string=''
    
    columns=['orderId','startAddress','endAddress','goodsName','goodsNum','carLength','placeOrderTime','urgency','status','operation']
    ready=function(){
        $('p').remove(".VuePagination__count")

        // if(this.records>=1){//当数据不超过10条时，也显示分页
        //     $('.pagination').removeAttr('style');
        // }
        
        this.$on('vue-pagination::table', function(page) {
            this.table1Page = page;	
            this.load(this.orderQuery,(page-1)*this.count,this.count);
        });

        $('#ApplicationStartTime').datetimepicker({format:  'YYYY.MM.DD HH:mm'});
        $('#ApplicationEndTime').datetimepicker({format:  'YYYY.MM.DD HH:mm'});
        $('#location').attr("disabled","true")

        var $table = $('#table').bootstrapTable({
            //选中列表中的一条数据
            clickToSelect:true,
            singleSelect:true,
                dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
                pagination: true,//是否分页
                pageSize: 10,//单页记录数
                pageList: [10, 20, 30],//分页步进值
                sidePagination: "client",//服务端分页
                buttonsAlign: "left",//按钮对齐方式 子询价编号 发货地址 送货地址 货物名称 货物数量 所需车长 询价时间 紧急程度 询价状态
                columns: [
                    {field: "select",title: "全选",checkbox: true,width: 20,align: "center",valign: "middle"},
                    {field: "orderId",title: "订单编号", sortable: true,order: "desc"},
                    {field: "originAddress",title: "发货地址",sortable: true,titleTooltip: "this is name"},
                    {field: "destinationAddress",title: "送货地址",sortable: true,},
                    {field: "goodsName",title: "货物名称",sortable: true,},
                    {field: "quantityOfGoods",title: "货物数量",sortable: true,},
                    {field: "carLength",title: "所需车长",sortable: true,},
                    {field: "creationTime",title: "下单时间",sortable: true,},
                    {field: "responseTime",title: "紧急程度",sortable: true,},
                    {field: "status",title: "订单状态",sortable: true,},              
                    {
                        field: 'template',
                        title: '操作',
                        formatter: function operateFormatter(value, row, index) {
                            var bb=`<a class="detailOrder" href="javascript:void(0)" title="查看详情"><i class='glyphicon glyphicon-eye-open text-info'></i></a>`
                            switch(row.status){
                                default:return bb;
                            }
                            
                        },
                        events: {
                            'click .detailOrder':function(e,value,row,index){
                                router.go('orderManageDetail/?id='+row.id+'&status='+row.status+'&name=detail');
                            },
                        },
                    }
                ],
                data: [],
                //选中row事件
                onCheck: (row, $element) =>{
                    //$element是当前tr的jquery对象
                    // $element.css("background-color", "green");
                    if(row.status=="派车中"||row.status=="订单终结"){            
                       return ;
                    }
                     $('#location').removeAttr("disabled");
                    
                    this.locationPhone=row.driverPhone;
                    
                    this.originAddress=row.originAddress;
                    this.destinationAddress=row.destinationAddress;
                    this.carCode=row.carrierCarCode;
                

                },
                //取消选中事件
                onUncheck:function(row){                 
                    if($('#table').bootstrapTable('getSelections').length==0){
                         $('#location').attr("disabled","true");                
                    }
                    
                },
              
                actionFormatter:function(value, row, index){
                    
                },
                locale: "zh-CN"//中文支持,
        });

        //表格 初始 加载数据
        this.load(this.orderQuery,this.skip,this.count);   


    }

    @Prop
    router=new VueRouter();

    seeks = true; 
    test="this is a testing string";
    locationPhone=""//定位所需参数，addedBy 李志军
    originAddress="";//定位所需参数，addedBy 李志军;
    destinationAddress=""//定位所需参数，addedBy 李志军;
    carCode="";

  
    skip= 0
    count = 10   
    d:string=""


    //请求数据
    load=function(orderQuery,skip,count){
        dataService().Order.getOrderList(this.orderQuery.orderId,this.orderQuery.orderStatus,this.orderQuery.startTime,this.orderQuery.endTime,this.orderQuery.startAddress,this.orderQuery.endAddress,skip,count).then((res)=>{
            for(var i=0;i<res.data.length;i++) {
                res.data[i].status=this.orderStatusList.filter(t=>t.value.indexOf(res.data[i].status)>-1&&t.text!="全部")[0].text;
            }   
            $('#table').bootstrapTable('load', res.data); 
            this.seeks= false ;
            this.records = res.total==0?0.5:res.total;

        },function(rej){
            this.seeks=false;
        });
    }

    //查询
    queryOrder=function(){
        this.seeks=true;
        this.$refs.table.setPage(1);
    }
    

    package:string = 'vue-typescript';
    repo:string = 'https://github.com/itsFrank/vue-typescript';

    //定位
    // toLocation=false;
    location=function(){
        //如果选中了多行信息，则弹出该提醒
        if($('#table').bootstrapTable('getSelections').length>1){
            bootbox.alert("请只选择一条信息进行定位");
            return;
            
        }
        
         router.go("./location?phone="+this.locationPhone+"&carCode="+this.carCode+"&originAddress="+this.originAddress+"&destinationAddress="+this.destinationAddress)
    };
    
   
   
    

}
